<template>
	<view class="dianYingPiao">
		<div class="bfff box1 center" v-for="v in tickets">
			<image :src="v.poster" mode="aspectFill" class="cover mr20"></image>
			<div class="right-box flex1">
				<div class="top mb10">
					<div class="f34 fbold mb50">{{v.movieName}}</div>
					<div class="f22 mb20">{{v.cinema}}</div>
					<div class="f22 mb20">{{v.movieDate}} {{v.startTime}}</div>
					<div class="f22">{{v.hallName}} </div>
				</div>
				<!-- <div class="f24">共<span class="fbold f26">2</span>张</div> -->
				<div class="f24 center">
					<div class="flex1">{{v.status}}</div>
					<div class="bth-red" v-if="v.status!='出票失败'&&v.status!='待出票'&&v.status!='已结束'" @click="showDetail(v)">取票码</div>
				</div>
			</div>
		</div>
		<u-empty v-if="tickets.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
			<view class="detail-main">
				<div class="fbold f30 center mb40">
					<div class="flex1">查看</div>
					<u-icon name="close" size="24" @click="close"></u-icon>
				</div>
				<u-divider></u-divider>
				<div class="center mb50">
					<!-- <l-qrcode :value="detail.qrcode" /> -->
					 
					  <up-qrcode :val="detail.qrcode" /> 
				</div>
				<div class="f28 mt50 tCenter">{{detail.ticketCode}}</div>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tickets: [],
				show: false,
				detail: {}
			}
		},
		created() {
			this.getMytickets()
		},
		methods: {
			showDetail(v) {
				this.detail = v
				this.show = true
			},
			close() {
				this.show = false
			},
			// 查询买到的电影票
			getMytickets() {
				this.$http('/api/getMytickets').then(r => {
					this.tickets = r.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bth-red {
		width: 140rpx;
	}

	.open-icon {
		width: 160rpx;
		height: 140rpx;
		top: 10rpx;
		right: 0;
	}

	.detail-main {
		padding: 30rpx;
		width:80vw;
	}

	.box1 {
		width: 705rpx;
		padding: 30rpx 20rpx 25rpx;
		margin: 0 auto 30rpx;
		border-radius: 13rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #F1F2F3;

		.cover {
			width: 190rpx;
			height: 265rpx;
			border-radius: 10rpx;
		}

		.right-box {
			.top {
				padding: 5rpx 0 32rpx;
				border-bottom: 1rpx dashed #D9D9D9;
			}
		}
	}
</style>